<template>
  <div class="lesson">
    <!-- 章节标题 -->
    <h2>{{section.sectionName}}</h2>
    <!-- 使用v-for遍历章节课时，并给每一个课时添加点击事件-->
    <p class="lesson-item" v-for="item in section.courseLessons" :key="item.id" @click="toVideo(item.canPlay, item.id)">
      <span>{{item.theme}}</span>
      <!-- 根据是都开放添加不同的图标 -->
      <van-icon v-if="item.canPlay" size="20" name="play-circle" />
      <van-icon v-else size="20" name="lock" />
    </p>
  </div>
</template>

<script>
export default {
  name: 'lesson',
  // 获取参数
  props: {
    section: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 课时点击事件，参数分别为 - canPlay：是否解锁，lessonId：课时Id
    toVideo (canPlay, lessonId) {
      // 如果解锁直接带着课时Id跳转
      if (canPlay) return this.$router.push(`/lesson-video/${lessonId}`)
      // 未解锁弹出提示
      return this.$toast('该课时课程未解锁')
    }
  }
}
</script>

<style lang="scss" scoped>
// 单个课程左右布局
.lesson .lesson-item {
  display: flex;
  justify-content: space-between;
  line-height: 20px;
}
</style>
